<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <span>1</span>
    <span>2</span>
    <span class="red">3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <div class="box1">
        <div class="box2">
            <div class="box3">
                <span>hello</span>
                <input type="text" value="默认值" id="txt">
            </div>
        </div>
    </div>
    <em>1</em>
    <em>2</em>
    <em>3</em>
    <em class="red">4</em>
    <em>5</em>
    <em>6</em>
</body>
<script src="../jquery.js"></script>
<script>
    // 过滤器
    // console.log($("span").parent())
    // console.log($("span").parents())
    // console.log($("span").parentsUntil(".box1"))

    // console.log($(".box1").next("em"))
    // console.log($(".box1").nextAll("em"))
    // console.log($(".box1").nextUntil(".red"))

    // console.log($(".box1").prev("span"))
    // console.log($(".box1").prevAll("span"))
    // console.log($(".box1").prevUntil(".red"))

    // console.log($(".box1").siblings())

    // 元素内容
    // console.log($('.box1').html())
    // $('.box1').html("<mark>13123131</mark>")

    // console.log($('.box1').text())
    // $('.box1').text("<mark>13123131</mark>")

    // console.log($("#txt").val())
    // $("#txt").val("hahaha ")

    // 元素属性
    // $(".box1").attr("abc","qwe")
    // $(".box1").attr({
    //     abc:"qwe",
    //     zxc:"hahahah"
    // })
    // console.log($(".box1").attr("abc"))
    // $(".box1").removeAttr("abc")

    // 元素样式
    // $(".box1").css("background","red")
    // $(".box1").css({
    //     "background":"red",
    //     border:"solid 1px black",
    //     width:300,
    //     lineHeight:"30px"
    // })
    // console.log($(".box1").css("background"))
    // console.log($(".box1").css(["background","width","height","color"]))
    


</script>
</html>